@charset "utf-8";

@function vw($a){
    @return ( $a / 320 ) * 100vw;
}

.swiper-container,.swiper-wrapper{
    width: 100%;
    height: 100%;
    background: black;
    color: white;
}

.web{
    position: relative;
    overflow: hidden;
}

.page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    ul{
        width: 100%;
        height: 100%;
        position: relative;
        li{
            position: absolute;
        }
        li.next{
            z-index: 10;
            bottom: vw(50);
            left: vw(140);
            width: vw(35.5);
            height: vw(26.5);
            img{
                width: 100%;
                height: 100%;
            }
        }
        li.nexttext{
            z-index: 9;
            bottom: vw(20);
            left: 47%;
            margin-left: vw(-40);
            p{
                text-align: center;
                font-size: vw(8);
            }
        }
    }
}
.slideInUp1{
    animation: slideInUp1 both;
}

@keyframes slideInUp1{
    0%{
        transform: translateY(vw(100));
    }
    100%{
        transform: translateY(0);
    }
}

.page1{
    background: url(../img/index-bg1.jpg);
    background-size: 100% 100%;
    li#title{
        top: vw(30);
        left: vw(25);
        text-align: center;
        color: #dde2e9;
        text-shadow: #ffffff 0 0 20px;
        p{
            opacity: .7;
        }
        p:first-of-type{
            font-size: vw(7);
        }
        p~p{
            font-size: vw(5);
        }
    }
    li#yunshi1{
        z-index: 3;
        top: 0;
        left: vw(40);
        width: vw(69.5);
        height: vw(78.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#yuanqiu{
        z-index: 2;
        top: vw(0);
        left: 0;
        width: vw(320);
        height: vw(568);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#yunshi2{
        z-index: 3;
        top: vw(320);
        right: 0;
        width: vw(83.5);
        height: vw(108.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#yunshi3{
        z-index: 3;
        top: vw(400);
        left: vw(85);
        width: vw(34.5);
        height: vw(25.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#shitou{
        z-index: 4;
        bottom: vw(0);
        left: vw(0);
        width: vw(124.5);
        height: vw(108.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#bigtitlebg{
        z-index: 5;
        top: vw(90);
        left: vw(15);
        width: vw(301.5);
        height: vw(157);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#feji{
        z-index: 6;
        top: vw(215);
        right: vw(15);
        width: vw(70);
        height: vw(57.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#taikongyi{
        z-index: 6;
        top: vw(215);
        left: vw(10);
        width: vw(216.5);
        height: vw(164);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .taikongyia{
        animation: shangxia 2s infinite;
    }
    @keyframes shangxia{
        0%{
            transform: translateY(0);
        }
        25%{
            transform: translateY(10px);
        }
        50%{
            transform: translateY(0);
        }
        75%{
            transform: translateY(10px);
        }
        100%{
            transform: translateY(0);
        }
    }
    li#bigtitletext1{
        z-index: 7;
        top: vw(115);
        left: vw(120);
        width: vw(89);
        height: vw(23);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#bigtitletext2{
        z-index: 7;
        top: vw(150);
        left: vw(73);
        width: vw(184);
        height: vw(48.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#bigtitletext3{
        z-index: 7;
        top: vw(205);
        left: vw(72);
        width: vw(181);
        height: vw(7.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.page2,.page3{
    background: url(../img/index-bg2.jpg);
    background-size: 100% 100%;
}

.page2{
    li#yuanqiu2{
        z-index: 2;
        top: vw(0);
        left: 0;
        width: vw(320);
        height: vw(568);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#feji2{
        z-index: 6;
        top: vw(110);
        right: vw(35);
        width: vw(70);
        height: vw(57.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#yunshi4{
        z-index: 6;
        bottom: vw(80);
        left: vw(35);
        width: vw(87.5);
        height: vw(142.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#yunshi5{
        z-index: 6;
        bottom: vw(190);
        right: vw(33);
        width: vw(58.5);
        height: vw(105);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li.text2{
        z-index: 9;
        left: vw(62.5);
        width: vw(195);
        top: 80%;
        p{
            font-size: vw(11);
            text-align: center;
            text-shadow: blue 0 0 20px,skyblue 0 0 18px;
        }
    }
    @keyframes textshang{
        0%{
            top: 80%;
        }
        100%{
            top: vw(190);
        }
    }
    li.text2active{
        animation: textshang 5s both;
    }
}


.slideInLeft1{
    animation: slideInLeft1 both;
}
@keyframes slideInLeft1{
    0%{
        transform: translateX(vw(-50));
    }
    100%{
        transform: translateX(0);
    }
}
.slideInLeft2{
    animation: slideInLeft2 both;
}
@keyframes slideInLeft2{
    0%{
        transform: translateX(vw(-50)) translateY(vw(30));
        
    }
    100%{
        transform: translateX(0) translateY(0);
    }
}

.page3{
    li.text3{
        z-index: 9;
        left: vw(52.5);
        width: vw(215);
        top: 60%;
        p{
            font-size: vw(11);
            text-align: center;
            text-shadow: blue 0 0 20px,skyblue 0 0 18px;
        }
    }
    @keyframes textshang1{
        0%{
            top: 60%;
        }
        100%{
            top: vw(130);
        }
    }
    li.text3active{
        animation: textshang1 5s both;
    }
    li#yuanqiu3{
        z-index: 2;
        top: vw(0);
        left: 0;
        width: vw(320);
        height: vw(568);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#yunshi6{
        z-index: 6;
        top: vw(60);
        right: vw(25);
        width: vw(112);
        height: vw(86);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#yunshi7{
        z-index: 6;
        bottom: vw(100);
        left: vw(65);
        width: vw(95.5);
        height: vw(84.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#start{
        z-index: 10;
        bottom: vw(70);
        right: 0;
        width: vw(169.5);
        height: vw(75.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
    li#guize{
        z-index: 10;
        bottom: vw(20);
        right: 0;
        width: vw(169.5);
        height: vw(75.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.page3-you{
    position: absolute;
    width: vw(6.5);
    height: vw(12);
}
li .page3-you:first-of-type{
    left: 16%;
    top: 36%;
}
li .page3-you:nth-of-type(2){
    left: 20%;
    top: 36%;
}
li .page3-you:nth-of-type(3){
    right: 28%;
    width: vw(7);
    top: 36%;
}
li .page3-you:nth-of-type(4){
    right: 32%;
    width: vw(7);
    top: 36%;
}
.fangxiao{
    animation: fangxiao both;
}

@keyframes fangxiao{
    0%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}


//规则

.guize{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    transform: translateY(100%);
    transition: 1s;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: url(../img/guize/guize-bg.png);
    background-size: 100% 100%;
    #guanbi{
        position: fixed;
        right: 7%;
        top: 4%;
        width: vw(20.5);
        height: vw(20);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .guize-box{
        position: fixed;
        width: vw(220);
        height: 82.84%;
        top: 9%;
        left: vw(50);
        overflow: scroll;
        .guize-title{
            height: vw(20);
            font-weight: normal;
            margin-bottom: 10px;
            img{
                height: 100%;
            }
            p.h3{
                display: inline-block;
                line-height: vw(20);
                font-size: vw(15);
                vertical-align: super;
            }
        }
        p.guize-text1{
            font-size: vw(10);
            white-space: nowrap;
            margin-bottom: 8px;
        }
        .dashs{
            width: 100%;
            border-bottom: 1px dashed #79c0ff;
            border-top: 1px dashed #79c0ff;
            padding: 5px 0;
            margin-bottom: 10px;
        }
        p.guize-text2{
            font-size: vw(8);
            text-align: center;
        }
        .liucheng{
            width: 100%;
            padding-bottom: 10px;
            ul{
                font-size: 0;
                width: 100%;
            }
            li{
                display: inline-block;
                width: 33%;
                .liucheng-yuan{
                    box-sizing: border-box;
                    width: vw(56);
                    height: vw(56);
                    background: url(../img/guize/guize-yuan.png) no-repeat;
                    background-size: vw(56) vw(56);
                    font-size: vw(9);
                    p{
                        box-sizing: border-box;
//                      display: inline-block;
                        padding: 22% 0 0 20%;
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        font-size: vw(9);
                        overflow: hidden;
                        line-height: vw(15);
                    }
                }
            }
            li:nth-child(2) .liucheng-yuan{
                margin: 0 auto;
                position: relative;
            }
            li:nth-child(2) .liucheng-yuan:before{
                position: absolute;
                top: 40%;
                left: -30%;
                content: "";
                width: vw(11);
                height: vw(13.5);
                background: url(../img/guize/guize-you.png);
                background-size: 100% 100%;
            }
            li:nth-child(2) .liucheng-yuan:after{
                position: absolute;
                top: 40%;
                left: 115%;
                content: "";
                width: vw(11);
                height: vw(13.5);
                background: url(../img/guize/guize-you.png);
                background-size: 100% 100%;
            }
            li:last-of-type .liucheng-yuan{
//              float: right;
                margin-left: vw(16);
            }
        }
        .dashs{
            h4{
                font-weight: normal;
                margin-bottom: 8px;
            }
            p.h4{
                display: inline-block;
                font-size: vw(10);
                margin-bottom: 6px;
            }
            p.blueC{
                font-size: vw(8);
            }
        }
        .guize-jiang{
            width: 100%;
            margin-bottom: 5px;
            .guize-jiang1{
                width: vw(107);
                height: vw(89);
                box-sizing: border-box;
                background: url(../img/guize/guize-fang.png) no-repeat;
                background-size: vw(107) vw(89);
                padding-left: 5%;
                padding-top: vw(13.25);
                .guize-jiang1-pic{
                    float: left;
                    margin-right: 4%;
                    width: vw(62.5);
                    height: vw(62.5);
                    shape-outside: circle();
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .guize-jiang1-text{
                    font-size: vw(8);
                    line-height: vw(13);
                }
            }
            .guize-jiang1:first-of-type{
                float: left;
                .guize-jiang1-text{
                    line-height: vw(15);
                }
            }
            .guize-jiang1:nth-of-type(2){
                float: right;
            }
            .guize-jiang2{
                float: left;
                width: vw(68);
                height: vw(81);
                background: url(../img/guize/guize-fang.png) no-repeat;
                background-size: vw(68) vw(81);
                margin: 2% 3.5% 0 0;
                padding-top: 2%;
                .guize-jiang2-pic{
                    width: vw(45);
                    margin: 0 auto;
                    img{
                        width: 100%;
                    }
                }
                .guize-jiang2-text{
                    text-align: center;
                    font-size: vw(8);
                    line-height: vw(13);
                }
            }
            .guize-jiang23{
                margin-right: 0;
            }
            .guize-jiang3{
                float: right;
                margin-top: 2%;
                width: vw(146);
                height: vw(81);
                background: url(../img/guize/guize-fang.png) no-repeat;
                background-size: vw(146) vw(81);
                .guize-jiang3-pic{
                    width: vw(90);
                    margin-top: 4%;
                    margin-left: 18%;
                    img{
                        width: 100%;
                    }
                }
                .guize-jiang3-text{
                    text-align: center;
                    font-size: vw(8);
                    line-height: vw(13);
                }
            }
        }
        .dashs2{
            border-bottom: none;
            padding-top: 5px;
            p{
                margin-bottom: 7px;
            }
        }
    }
}

